<template>
  <view class="flex-col page login-page">
    <view class="flex-col justify-start items-end self-center image-wrapper">
      <image class="image_2" mode="widthFix" :src="imgUrl + 'logo.png'" />
    </view>
    <view class="flex-col self-stretch group">
      <!-- <button class="mt-24 flex-col justify-start items-center text-wrapper w-full" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> -->
      <button class="mt-24 flex-col justify-start items-center text-wrapper w-full" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
        <text class="text">微信一键登录</text>
      </button>
      <!-- <button class="mt-24 flex-col justify-start items-center text-wrapper" @click="handleLogin">
        <text class="text">登录/注册</text>
      </button> -->
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { imgUrl } from '@/utils/config'
  import { useRequest } from '@/api';
  const { API_LOGIN_MOBILE_POST } = useRequest()

  // 获取用户头像
  const onChooseavatar = (e) => {
    uni.login({
      provider: 'weixin',
      success: (res) => {
        console.log('onChooseavatarres',res);
        const code = res.code;
        loginByMobile(code, e.detail.avatarUrl);
        uni.setStorageSync('avatarUrl', e.detail.avatarUrl);
      }
    })
  }

  // 获取跳转页面
  const redirectUrl = ref('')
  onShow(() => {
    const pages = getCurrentPages(); // 获取当前页面栈
    const currentPage = pages[pages.length - 1]; // 获取当前页面
    console.log('currentPage',currentPage);
    
    const options = currentPage.options; // 获取当前页面的参数
    const { redirect } = options;
    redirectUrl.value = decodeURIComponent(redirect);
  })

  const loginByMobile = async (code, avatarUrl) => {
    console.log('loginByMobile',code, avatarUrl);
    try {
      const res = await API_LOGIN_MOBILE_POST({ 
        code, 
        nickname: `微信用户${Math.random().toString(36).substring(2, 15)}`,
        avatar: avatarUrl,
      })
      const { user: { access_token } } = res.data;
      uni.setStorageSync('token', access_token);
      uni.setStorageSync('userInfo', res.data);
      console.log('redirectUrl',redirectUrl);
      if (redirectUrl.value && redirectUrl.value !== "undefined") {
        uni.redirectTo({
          url: redirectUrl.value
        })
      } else {
        uni.reLaunch({
          url: '/pages/leagueMatchesHome/index'
        })
      }
    } catch (error) {
      console.log(error)
         
    }
    
  }

  // 获取手机号
  const getPhoneNumber = (e) => {
    console.log(e)
  }

  // 获取用户头像
  const getUserAvatar = () => {
    uni.getUserProfile({
      desc: '获取用户头像',
      success: (res) => {
        console.log(res)
      }
    })
  }
  const handleLogin = () => {
    uni.navigateTo({
      url: '/pages/login/mobileLogin'
    })
  }
</script>
<style scoped lang="scss">
  .login-page {
    &.page {
      padding-bottom: 524rpx;
      background-color: #ffffff;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100vh;
      .image {
        filter: drop-shadow(0rpx 2rpx 0rpx #4444441a);
        width: 100vw;
        height: 23.4667vw;
      }
      .image-wrapper {
        margin-top: 264rpx;
        padding: 12rpx 0 12rpx;
        /* background-image: url('https://ide.code.fun/api/image?token=67887aa2defdb1001112b932&name=947e2817909701047074601dc9703483.png'); */
        background-position: 0% 0%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 263rpx;
        .image_2 {
          width: 236rpx;
        }
      }
      .group {
        margin-top: 184rpx;
        padding: 0 80rpx;
        .image_3 {
          width: 590rpx;
          height: 88rpx;
        }
        .w-full {
          background-color: #ea602d !important;
          .text {
            color: #ffffff !important;
          }
        }
        .text-wrapper {
          padding: 20rpx 0;
          width: 590rpx;
          height: 90rpx;
          background-color: #4444441a;
          box-shadow: 0rpx 0rpx 18rpx 0rpx #ee73500a;
          border-radius: 44rpx;
          border: unset !important;
          &::after {
            border: unset !important;
          }
          .text {
            color: #444444;
            font-size: 36rpx;
            font-family: 'PingFang SC';
            line-height: 50rpx;
          }
        }
      }
    }
  }
</style>
